<template>
	<view class="choosePort" @click="toPortSelect">
		<view class="choosePort-curPortTitle">{{curPort.name}}</view>
		<u-icon class="choosePort-downImage" name="arrow-down-fill" color="#0672BF" size="20"></u-icon>

		<!-- 选择港口列表弹窗 -->
		<view class="">
			<u-popup v-model="isPopupShow" mode="right" width="100%" :mask="false">
				<!-- 顶部nav部分 -->
				<!-- <view class="popup-navView">
					<view class="popup-navBar">
						<u-icon class="popup-nav-backBtn" name="arrow-left" color="#D2D2D2" size="34"
							@click="closePortPopup"></u-icon>
						<view class="popup-nav-title">选择港口</view>
					</view>
				</view> -->
				<navView  title="选择港口"></navView>
				<view class="popup-viewContainer">
					<!-- 搜索框 -->
					<u-search class="search" placeholder="请输入港口名称" v-model="searchWord" :show-action="false" color="#999999"
						height="60" margin="30rpx" @search="didSearch" @change="searchChange"></u-search>
					
					<!-- 列表 -->
					<view class="portListTable" v-for="(item,index) in portList">
						<view class="cellItem" @click="itemClick(item)">
							<view class="cellItem-portName">{{item.name}}</view>
							<view class="cellItem-shipping">运费 {{item.shipping}} 元</view>
							<view class="cellItem-shipping">运费 {{item.shipping}} 元</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import navView from '../components/navView.vue'
	export default {
		name: "choosePortComponent",
		components:{
			navView,
		},
		data() {
			return {
				curPort: {},
				//选择港口列表弹窗是否显示
				isPopupShow: false,
				//港口列表
				portList: [],
				//搜索字段
				searchWord: '',
			};
		},
		created() {
			this.requestDefaultPort();
			this.rerquesPortList();
		},
		methods: {
			// 获取默认港口
			requestDefaultPort() {
				this.$u.api.requestDefaultPort().then(res => {
					this.changePort(res);
				}).catch(err => {
					console.log(err)
				})
			},
			
			//获取港口列表
			//name: 搜索关键字
			rerquesPortList() {
				let name = this.searchWord ? this.searchWord : ''
				this.$u.api.rerquesPortList(name).then(res => {
					this.portList = res;
				}).catch(err => {
					console.log(err)
				})
			},
			
			//切换港口的回调
			changePort(newPort) {
				if (newPort.pkid != this.curPort.pkid) {
					this.curPort = newPort;
					// 发送事件给父组件
					this.$emit('changePort', newPort);
				}
			},

			//跳转到港口选择页面
			toPortSelect() {
				this.isPopupShow = true;
				// 发送事件给父组件
				this.$emit('toPortSelect');
			},
			//关闭港口选择列表
			closePortPopup() {
				this.isPopupShow = false;
				// 发送事件给父组件
				this.$emit('closePortPopup');
			},
			//搜索
			didSearch(searchWord) {
				this.rerquesPortList();
			},

			//搜索文字变化
			searchChange() {
				if (this.searchWord.length == 0) {
					this.rerquesPortList();
				}
			},

			//列表cell的点击事件-选中港口
			itemClick(e) {
				this.closePortPopup();
				this.changePort(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.choosePort {
		height: 40rpx;
		line-height: 40rpx;
	}

	.choosePort-curPortTitle {
		float: left;
		font-size: 26rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.choosePort-downImage {
		margin-left: 14rpx;
	}

	/* 选择港口列表弹窗-顶部nav部分 */
	.popup-navView {
		height: 128rpx;
		background-color: #FFFFFF;
		padding-top: 40rpx;
	}

	.popup-navBar {
		height: 88rpx;
	}

	.popup-nav-backBtn {
		margin-left: 18rpx;
		margin-top: 27rpx;
		float: left;
	}

	.popup-nav-title {
		color: #333333;
		width: 60%;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 34rpx;
		text-align: center;
		float: left;
		position: absolute;
		margin-left: 20%;
	}

	.popup-viewContainer {
		width: 100%;
		min-height: 100%;
		position: absolute;
		background-color: #F3F3F3;
	}
	
	.search {
		border: 1px solid #BFBFBF;
		border-radius: 10px;
	}
	
	.portListTable {
		background-color: #F3F3F3;
	}
	
	.cellItem {
		width: 690rpx;
		height: 90rpx;
		background-color: #FFFFFF;
		border-radius: 10px;
		margin: 0rpx 30rpx 30rpx 30rpx;
	}
	
	.cellItem-portName {
		width: 25%;
		line-height: 90rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 20rpx;
		position: absolute;
	}
	
	.cellItem-shipping {
		width: 25%;
		line-height: 90rpx;
		font-size: 26rpx;
		color: #999999;
		margin-left: 37.5%;
		position: absolute;
	}
</style>
